<!DOCTYPE html>
<html>
<head>
    <title>NFC URL批量录入</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>NFC URL批量录入</h1>

        <h1>NFC标签批量录入系统</h1>
        <div id="progress">
            <p>剩余未分配URL: <span id="remaining">10</span>/10</p>
        </div>
        <div id="current-task">
            <h3>当前操作</h3>
            <p>请将标签放置在读卡器上...</p>
            <p>正在处理URL: <strong id="current-url"></strong></p>
            <div id="result"></div>
        </div>
        <!-- 在“已录入标签”区域添加按钮 -->
        <div id="recorded-tags">
            <h3>已录入标签 
                <button onclick="formatSelectedTag()" style="margin-left: 20px;">格式化选中标签</button>
            </h3>
            <table>
                <thead><tr><th>选择</th><th>UID</th><th>URL</th></tr></thead>
                <tbody id="tag-list">
                    <!-- 每行添加复选框 -->
                    <tr>
                        <td><input type="checkbox" class="tag-checkbox" data-uid="..."></td>
                        <td>...</td>
                        <td>...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="footer">
            <p>© 2025 NFC URL批量录入系统</p>
        </div>
    </div>

    <script>
        function updateStatus() {
            $.get('/next_url', function(response) {
                // 更新进度
                $('#remaining').text(response.remaining);
                if (response.url) {
                    $('#current-url').text(response.url);
                    attemptWrite(response.url);
                } else {
                    $('#current-url').text("所有URL已分配完成！");
                }
            });
        }

        function attemptWrite(url) {
            $.ajax({
                url: '/write_url',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({url: url}),
                success: function(response) {
                    let resultDiv = $('#result');
                    if (response.status === 'success') {
                        resultDiv.html(`<span class="success">成功写入！UID: ${response.uid}</span>`);
                        addTagToList(response.uid, url);
                    } else {
                        resultDiv.html(`<span class="error">错误: ${response.message}</span>`);
                    }
                    setTimeout(updateStatus, 2000); // 2秒后刷新状态
                }
            });
        }

        function addTagToList(uid, url) {
            $('#tag-list').prepend(
                `<tr><td>${uid}</td><td>${url}</td></tr>`
            );
        }

        // 初始化
        $(document).ready(function() {
            updateStatus();
            setInterval(updateStatus, 5000); // 每5秒自动刷新
        });


// 格式化选中标签
function formatSelectedTag() {
    const selected = document.querySelector('.tag-checkbox:checked');
    if (!selected) {
        alert('请先选择一个标签！');
        return;
    }
    if (!confirm('确定要格式化此标签吗？数据将无法恢复！')) return;

    const uid = selected.dataset.uid;
    $.post('/format_tag', JSON.stringify({uid: uid}), function(response) {
        if (response.status === 'success') {
            alert(`标签 ${uid} 格式化成功！`);
            // 刷新列表
            updateTagList();
        } else {
            alert(`错误: ${response.message}`);
        }
    }, 'json');
}

// 更新标签列表（动态加载）
function updateTagList() {
    $.get('/get_all_tags', function(data) {
        let html = '';
        for (const [uid, url] of Object.entries(data)) {
            html += `
                <tr>
                    <td><input type="checkbox" class="tag-checkbox" data-uid="${uid}"></td>
                    <td>${uid}</td>
                    <td>${url}</td>
                </tr>
            `;
        }
        $('#tag-list').html(html);
    });
}


    </script>
</body>
</html>